import { Space } from "antd";
import { Card as SemiCard, Descriptions as SemiDescriptions } from "@douyinfe/semi-ui";
import { useModel } from "umi";
import { useEffect, useState } from "react";

import { PersonAccountByUuid } from "../../_graphql/persons";

const PersonAccount = () => {
    const { windowInnerHeight, graphqlFetchPlatform, UTCTimeToLocal } = useModel("global");
    const { currentPerson } = useModel("person.info");

    const [accountInfo, setAccountInfo] = useState({});

    const loadAccountInfo = async () => {
        let res = await graphqlFetchPlatform({ query: PersonAccountByUuid, variables: { uuid: currentPerson } });
        setAccountInfo(res?.a || {});
    };

    useEffect(() => {
        currentPerson && loadAccountInfo();
    }, [currentPerson]);

    const cardBodyHeight = windowInnerHeight - 90 - 20 - 60 - 54 - 2;

    return (
        <div style={{ padding: 10 }}>
            <SemiCard
                title={<span style={{ lineHeight: "32px", fontSize: 16, fontWeight: 600 }}>账户信息</span>}
                headerExtraContent={<Space style={{ lineHeight: "32px", fontSize: 14, fontWeight: 600 }}></Space>}
                headerStyle={{ padding: "10px 14px" }}
                shadows="always"
                bordered={false}
                size="default"
                bodyStyle={{ padding: "20px 40px", height: cardBodyHeight }}
            >
                {currentPerson && (
                    <SemiDescriptions>
                        <SemiDescriptions.Item itemKey="登录名称">{accountInfo.account}</SemiDescriptions.Item>
                        <SemiDescriptions.Item itemKey="登录手机号">{accountInfo.phone}</SemiDescriptions.Item>
                        <SemiDescriptions.Item itemKey="登录Email">{accountInfo.email}</SemiDescriptions.Item>
                        <SemiDescriptions.Item itemKey="是否注册用户">{accountInfo.isRegistered ? "是" : "否"}</SemiDescriptions.Item>
                        <SemiDescriptions.Item itemKey="注册来源">{accountInfo.registeredFrom}</SemiDescriptions.Item>
                        <SemiDescriptions.Item itemKey="注册的IP地址">{accountInfo.registeredIp}</SemiDescriptions.Item>
                        <SemiDescriptions.Item itemKey="注册时间">{accountInfo.registeredTime ? UTCTimeToLocal(accountInfo.registeredTime) : ""}</SemiDescriptions.Item>
                        <SemiDescriptions.Item itemKey="账户状态">{accountInfo.status}</SemiDescriptions.Item>
                        <SemiDescriptions.Item itemKey="创建时间">{accountInfo?.createdTime ? UTCTimeToLocal(accountInfo.createdTime) : ""}</SemiDescriptions.Item>
                        <SemiDescriptions.Item itemKey="更新时间">{accountInfo?.updatedTime ? UTCTimeToLocal(accountInfo.updatedTime) : ""}</SemiDescriptions.Item>
                        <SemiDescriptions.Item itemKey="更新时间">{accountInfo?.updatedTime ? UTCTimeToLocal(accountInfo.updatedTime) : ""}</SemiDescriptions.Item>
                        {accountInfo.status === "已注销" && (
                            <SemiDescriptions.Item itemKey="注销时间">{accountInfo?.accountCancellationTime ? UTCTimeToLocal(accountInfo.accountCancellationTime) : ""}</SemiDescriptions.Item>
                        )}
                        {accountInfo.status === "已注销" && (
                            <SemiDescriptions.Item itemKey="注销反悔有效时间">
                                {accountInfo?.accountCancellationExpirationTime ? UTCTimeToLocal(accountInfo.accountCancellationExpirationTime) : ""}
                            </SemiDescriptions.Item>
                        )}
                    </SemiDescriptions>
                )}
            </SemiCard>
        </div>
    );
};

export default PersonAccount;
